<template>
  <view
    :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }"
    class="index-page"
  >
    <!-- 自定义导航 -->
    <view
      :style="{ paddingTop: safeAreaInsets.top + 'px' }"
      class="page-navbar"
    >
      优医
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <input
        placeholder-class="input-placeholder"
        placeholder="搜一搜: 疾病/症状/医生/健康知识"
        class="input"
        type="text"
      />
      <view class="icon-search">
        <uni-icons size="22" color="#C3C3C5" type="search" />
      </view>
    </view>

    <!-- 快速入口 -->
    <view class="quick-entry">
      <navigator class="quick-entry-item" hover-class="none" url=" ">
        <image class="icon" src="/static/images/quick-entry-1.png" />
        <text class="label">问医生</text>
        <text class="tips">按科室查问医生</text>
      </navigator>
      <navigator class="quick-entry-item" hover-class="none" url=" ">
        <image class="icon" src="/static/images/quick-entry-2.png" />
        <text class="label">极速问诊</text>
        <text class="tips">20s医生快速回复</text>
      </navigator>
      <navigator class="quick-entry-item" hover-class="none" url=" ">
        <image class="icon" src="/static/images/quick-entry-3.png" />
        <text class="label">开药门诊</text>
        <text class="tips">线上买药更方便</text>
      </navigator>
    </view>
    <!-- 快速查看 -->
    <view class="quick-view">
      <navigator class="quick-entry-item" hover-class="none" url=" ">
        <image class="icon" src="/static/images/quick-view-1.png" />
        <text class="label">药品订单</text>
      </navigator>
      <navigator class="quick-entry-item" hover-class="none" url=" ">
        <image class="icon" src="/static/images/quick-view-2.png" />
        <text class="label">健康档案</text>
      </navigator>
      <navigator class="quick-entry-item" hover-class="none" url=" ">
        <image class="icon" src="/static/images/quick-view-3.png" />
        <text class="label">我的处方</text>
      </navigator>
      <navigator class="quick-entry-item" hover-class="none" url=" ">
        <image class="icon" src="/static/images/quick-view-4.png" />
        <text class="label">疾病查询</text>
      </navigator>
    </view>
    <!-- 广告占位 -->
    <view class="banner-placeholder">
      <swiper
        class="uni-swiper"
        indicator-dots
        indicator-color="#ffffff99"
        indicator-active-color="#fff"
        circular
      >
        <swiper-item>
          <navigator hover-class="none" class="navigator" url=" ">
            <image class="banner-image" src="/static/images/banner-1.png" />
          </navigator>
        </swiper-item>
        <swiper-item>
          <navigator hover-class="none" class="navigator" url=" ">
            <image
              class="banner-image"
              src="/static/images/banner-1.png"
              mode="aspectFill"
            />
          </navigator>
        </swiper-item>
      </swiper>
    </view>
  </view>
  <view :style="{marginTop:-safeAreaInsets.top+'px'}"  class="custon-top">
  	<custon-sticky :offsetTop="safeAreaInsets.top+'px'">
  		<custom-tabs :list="list" @tabs="changeTbas"></custom-tabs>
  	</custon-sticky>
  	<view class="black"></view>
  </view>
  
</template>

<script setup>
	//获取自定义组件
	import {ref} from "vue"
	const list = ref([
		{
			id:1,
			title: '关注',
			content: '热门内容'
		},
		{id:2,
			title: '推荐',
			content: '推荐内容'
		},
		{id:3,
			title: '护肤品',
			content: '护肤内容'
		},
		{id:4,
			title: '减脂',
			content: '减脂内容'
		},
		{id:5,
			title: '饮食',
			content: '饮食内容'
		}
	])
	
  // 获取安全区域的边界
  const { safeAreaInsets } = uni.getSystemInfoSync()
  console.log(safeAreaInsets)
  const changeTbas=(item)=>{
	  console.log(item);
  }
</script>

<style lang="scss">
  .index-page {
    background-size: contain;
    background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/index-page-header-bg.png);
    background-repeat: no-repeat;
  }

  .page-navbar {
    height: 88rpx;
    line-height: 88rpx;
    padding: 0 30rpx;
    font-size: 34rpx;
    color: #fff;
  }

  .search-bar {
    height: 80rpx;
    padding: 0 30rpx;
    margin-top: 10rpx;
    position: relative;

    .input {
      height: 100%;
      padding-left: 80rpx;
      padding-right: 40rpx;
      border-radius: 80rpx;
      background-color: #fff;
      font-size: 26rpx;
      color: #3c3e42;
      box-shadow: 0px 10rpx 22rpx rgba(0, 0, 0, 0.1);
    }

    .input-placeholder {
      color: #979797;
    }

    .icon-search {
      position: absolute;
      top: 50%;
      transform: translate(24rpx, -50%);
      margin-top: 2rpx;
    }
  }

  // 快速入口
  .quick-entry {
    display: flex;
    justify-content: space-around;
    line-height: 1;
    padding: 50rpx 30rpx 40rpx;

    &-item {
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    .icon {
      width: 92rpx;
      height: 92rpx;
    }

    .label {
      font-size: 28rpx;
      margin: 20rpx 0 10rpx;
      color: #121826;
    }

    .tips {
      font-size: 22rpx;
      color: #848484;
    }
  }

  // 快速查看
  .quick-view {
    display: flex;
    justify-content: space-around;
    line-height: 1;
    padding: 10rpx 30rpx 20rpx;

    &-item {
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    .icon {
      width: 62rpx;
      height: 62rpx;
    }

    .label {
      font-size: 28rpx;
      margin: 20rpx 0 10rpx;
      color: #121826;
    }
  }

  .banner-placeholder {
    height: 200rpx;
    padding: 0 30rpx;
    margin: 20rpx 0;
    position: relative;
    z-index: 101;

    .uni-swiper {
      height: 200rpx;
    }

    .banner-image {
      width: 100%;
      height: 200rpx;
      border-radius: 30rpx;
    }
  }

  .black{
	 
	  height: 1500rpx;
  }

</style>
